<template>
    <div>
        <MlRender
            v-for="item in treeData"
            :key="item.key"
            :item="item"
            :golbal="golbal"
            :list="treeData"
            @copy="copy"
            @deleteItem="deleteItem"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import MlRender from "./index-t.vue";
import { cloneDeep } from "lodash-es";

interface NodeType {
    node: any;
    list: any[];
}

export default defineComponent({
    name: "ml-view",
    components: {
        MlRender,
    },
    props: {
        treeData: Array,
        golbal: Object as PropType<any>,
    },
    setup(props) {
        const copy = (nodeEvent: NodeType) => {
            const { node, list } = nodeEvent;
            list.splice(
                list.findIndex((r) => r === node),
                0,
                Object.assign(cloneDeep(node), {
                    key: new Date().valueOf().toString(),
                })
            );
        };
        
        const deleteItem = (nodeEvent: NodeType) => {
            const { node, list } = nodeEvent;

            list.splice(
                list.findIndex((r) => r === node),
                1
            );
        };

        return { copy, deleteItem };
    },
});
</script>
